import { api } from '@/servers/api'
import { getData } from '@/servers/http'
import React, { Fragment, useEffect, useState } from 'react'
import starImg from '@/resource/vision/star.png'
import moonImg from '@/resource/vision/moon.png'
import editImg from '@/resource/vision/edit.png'
import styles from './index.module.less'

function Vision({ data }: any) {
    const info = data
    if (!info) {
        return null
    }
    return (
        <div className={styles.container}>
            <div className={styles.header}>
                <img className={styles.moon_img} src={moonImg} />
                我的愿景展望
            </div>
            <div className={styles.content_wrapper}>
                {info?.detail?.map((item: any) => {
                    const { barrierVisionQuestion, answer } = item

                    return (
                        <Fragment key={item.id}>
                            <div className={styles.title}>
                                <img className={styles.star_img} src={starImg} />
                                <span>{barrierVisionQuestion.answer_title}</span>
                            </div>
                            <div className={styles.answer_content}>{answer}</div>
                        </Fragment>
                    )
                })}
            </div>
        </div>
    )
}

export default Vision
